<template>
  <div class="work">
    <div class="header">
      <div class="search">
        <form action="">
          <a href=""><img src="../assets/images/icon-home.png" alt=""></a>
          <p>
            <a>成都</a>
            <input type="search" placeholder="请输入" value="web前端">
          </p>
          <button>搜索</button>
          <div class="chat-warp">
            <div class="chat-icon">
              <img src="../assets/images/chat.png">
            </div>
            <div>消息</div>
          </div>
        </form>
      </div>
    </div>
    <div class="banner">
      <ul>
        <li>经验</li>
        <li>学历</li>
        <li>薪资</li>
        <li>规模</li>
        <li>融资</li>
      </ul>
    </div>
    <router-link tag="div" to="/company" class="work">
      <div class="work-item">
        <div class="company">
          <img src="../assets/images/company.jpg">
        </div>
        <div class="detail">
          <div class="title">
            <h4>web前端</h4>
            <span>12-16K</span>
          </div>
          <div class="name">
            法本
          </div>
          <div class="msg">
            <em>成都</em>
            <em>3-5年</em>
            <em>本科</em>
          </div>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
  }
</script>

<style lang="scss" scoped>
@import "../assets/scss/variables";
.header{
  color:map-get($colors, "primary");
  border-bottom: 1px solid map-get($colors, "gray");
  .search{
    form{
      display: flex;
      align-items: center;
      width: 100%;
      margin: 5px 10px;
      img{
        width: 18px;
        height: 18px;
      }
      p{
        display: flex;
        justify-content: space-between;
        margin: 10px;
        padding: 5px 15px;
        width: 60%;
        background: #f4f7f9;
        border-radius: 30px;
        a{
          display: block;
          margin: 3px;
          font-size: 12px;
          padding-right: 5px;
          width: 44px;
          height: 15px;
          border-right: 1px solid #aaa;
          color: rgb(24, 21, 21);
        }
        input{
          border: none;
          height: 18px;
          font-size: 14px;
          background-color: #f4f7f9;
        }
      }
      button{
        outline: none;
        border: none;
        background: #fff;
        color: map-get($colors, "primary");
        font-size: 14px;
        margin-right: 30px;
      }
      .chat-warp{
        display: flex;
        flex-direction: column;
        font-size: 9px;
        .chat-icon{
          position: relative;
          display: flex;
          flex-direction: column;
          img{
            background-color: map-get($colors, "primary");
            width: 18px;
            height: 18px;
          }
          &::after{
            content: '';
            position: absolute;
            top: -1px;
            right: -1px;
            width: 6px;
            height:6px;
            border-radius: 3px;
            background: map-get($colors, "orange");
          }
        }
      }
    }
  }
  
}
.banner{
  border-bottom: 1px solid #ccc;
  ul{
    display: flex;
    align-items: center;
    li{
      width: 25%;
      text-align: center;
      font-size: 12px;
      color: #aaa;
      padding: 10px 0;
      &:after{
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        position: relative;
        top: -3px;
        left: 5px;
        border-left: 1px solid #797979 !important;
        border-top: 1px solid #797979 !important;
        transform: rotate(225deg);
        transition: all .3s ease 0s;
      }
    }
    
  }
}
.work{
  .work-item{
    display: flex;
    align-items: center;
    margin: 0 15px;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    .company{
      width: 25%;
      img{
        border-radius: 5px;
        width: 59px;
        height: 59px;
      }
    }
    .detail{
      flex: 1;
      .title{
        display: flex;
        justify-content: space-between;
        h4{
          font-size: 14px;
          display: inline-block;
          margin: 0;
          font-weight: normal;
        }
        span{
          display: inline-block;
          color: map-get($colors, "orange");
          font-size: 19px;
        }
      }
      .name{
        font-size: 12px;
        padding-bottom: 5px;
      }
      .msg{
        white-space: nowrap;
        font-size: 12px;
        color: map-get($colors, "gray1");
        em{
          margin-right: 15px;
        }
      }
    }
  }
}
</style>